<template>
    <div class="page-container">
        <!-- 顶部信息栏 -->
        <Header />
        <el-main class="page-main" v-if="isShow">
            <div class="page-main-title" style="color: #4F4F4F;">快速建立网上纪念馆</div>
            <el-card class="box-card">
                <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules" class="form-main">
                    <el-form-item label="逝者姓名" prop="name" class="form-main-item">
                        <el-input v-model="formData.name" clearable placeholder="请输入逝者姓名" />
                    </el-form-item>

                    <!-- <el-form-item label="出生日期" prop="birth_date" class="form-main-item">
                        <el-input v-model="formData.birth_date" clearable placeholder="请输入逝者出生日期 例如: 1980-01-01" />
                    </el-form-item>
                    <el-form-item label="去世日期" prop="death_date" class="form-main-item">
                        <el-input v-model="formData.death_date" clearable placeholder="请输入逝者去世日期 例如: 2020-01-01" />
                    </el-form-item> -->
                    <!-- <material-picker v-model="formData.avatar" :limit="1" /> -->
                    <el-form-item label="逝者照片" prop="avatar">
                        <el-upload
                            class="avatar-uploader"
                            :action="upLoadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>

                    <!-- <el-form-item label="情感关系" prop="relationship" class="form-main-item">
                        <el-select v-model="formData.relationship" clearable placeholder="请选择情感关系">
                            <el-option v-for="item in relationshipList" :key="item.id" :label="item.title" :value="item.id" />
                        </el-select>
                    </el-form-item> -->
                    
                    <el-divider />
                    <el-form-item v-if="!isShowRegister">
                        <el-button @click="handleSubmit" class="form-main-btn" size="large">创建纪念馆</el-button>
                    </el-form-item>
                    <el-form-item label="服务条款" class="form-main-item-checkbox">
                        <el-checkbox v-model="isCheckedl" /><span @click="isShowEditor = !isShowEditor" class="form-main-item-checkbox-title">阅读并同意《今生永恒网服务条款》提交资料表示已同意。</span>
                    </el-form-item>
                    
                    <editor class="mb-10" v-model="textareaValue" height="500" v-if="isShowEditor" :isShowTool="false"></editor>
                    
                </el-form>

                <!-- 注册表单 -->
                <el-form ref="registerFormRef" :model="registerFormData" label-width="120px" :rules="registerFormRules" class="form-main" v-if="isShowRegister">
                    <el-form-item label="手机号" prop="account" class="form-main-item">
                        <el-input v-model="registerFormData.account" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="验证码" prop="verificationCode" class="form-main-item">
                        <div class="verification-code-input" >
                            <el-input v-model="registerFormData.verificationCode" placeholder="请输入验证码"></el-input>
                            <el-button type="primary" :disabled="isSendingCode" @click="getVerificationCode">
                                {{ codeButtonText }}
                            </el-button>
                        </div>
                    </el-form-item> -->

                    <el-form-item label="登录密码" prop="password" class="form-main-item">
                        <el-input type="password" v-model="registerFormData.password" placeholder="请输入登录密码"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="password_confirm" class="form-main-item">
                        <el-input type="password" v-model="registerFormData.password_confirm" placeholder="请再次输入登录密码"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname" class="form-main-item">
                        <el-input v-model="registerFormData.nickname" placeholder="请输入昵称" ></el-input>
                    </el-form-item>

                    <el-form-item v-if="isShowRegister">
                        <el-button @click="handleSubmit" class="form-main-btn" size="large">提交注册</el-button>
                    </el-form-item>
                    <div>
                        <el-checkbox v-model="agreement">
                            <span class="agreement-text">我已阅读并同意</span>
                            <a href="#" class="agreement-link">《今生永恒墓园用户协议》</a>
                            <span class="agreement-text">及</span>
                            <a href="#" class="agreement-link">《隐私条款》</a>
                        </el-checkbox>
                    </div>

                    <editor class="mb-10" v-model="textareaValuePrivacy" height="500" v-if="isShowEditorPrivacy" :isShowTool="false"></editor>
                </el-form>

                
            </el-card>
            
        </el-main>
        <el-main class="page-main" v-else>
            <div class="page-main-title">纪念馆{{ mode == 'add' ? '创建' : '编辑' }}成功！请等待管理员审核！</div>
            <div class="page-main-page-container">
                <div class="page-main-page-container-title">纪念馆信息：</div>
                <el-divider />
                <div class="page-main-page-container-content">
                    <p>{{ formData.name }}网上纪念馆</p>
                    <p class="link" @click="handleClick"> >> 进入纪念馆设置</p>
                </div>
            </div>
        </el-main>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import { my_mufast_add } from '@/api/graveyard'
import { reactive, ref, toRaw, shallowRef, defineEmits, onMounted } from 'vue'
import type { FormInstance, UploadProps, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import useUserStore from '@/stores/modules/user'
import { getToken } from '@/utils/auth'

const userStore = useUserStore()
const router = useRouter()
const formRef = ref<FormInstance>()
const mode = ref('add')
const isShow = ref(true)
const isShowRegister = ref(false) // 是否显示注册用户表单
// import Popup from '@/components/popup/index.vue'
// const popupRef = shallowRef<InstanceType<typeof Popup>>()
    // const emit = defineEmits(['success', 'close'])
const isCheckedl = ref(true) // 是否同意
const isShowEditor = ref(false) // 是否显示服务条款
const textareaValuePrivacy = ref('') // 隐私条款
const isShowEditorPrivacy = ref(false) // 是否显示隐私条款
const agreement = ref(false) // 是否同意
const textareaValue = ref(`               今生永恒网网服务条款
 　　在注册使用前请您仔细阅读如下服务条款：当您点选同意键时即视为您已仔细阅读本条款，同意接受本服务条款的所有规范并愿受其约束．
一：服务条款的确认和接纳：
今生永恒网各项电子服务的所有权和运作权归属今生永恒网。用户应完全同意所有服务条款并完成注册程序，才能成为今生永恒网的正式用户。
二：基本条款：
    今生永恒网运用今生永恒网网上祭祀平台通过国际互联网络为用户提供网络服务。用户应同意以下条款：
 1、提供准确的个人资料，并及时更新注册资料。
 2、用户将对用户名和密码安全负全部责任，并对其用户名下的所有活动负全责。
 3、用户对服务的使用应遵守适用于今生永恒网的国家法律、地方法规和国际法律。
 4、用户同意保障和维护今生永恒网全体成员的利益，负责承担因违反服务条款引起的律师费用、损害补偿费等。
 5、尊重隐私是今生永恒网的基本政策，今生永恒网不公开用户的姓名、地址、电子邮箱和手机号码等非公开信息，除以下情况外：
     　a、用户授权今生永恒网透露这些信息；
     　b、相应的法律及程序要求今生永恒网提供用户的个人资料；
     　c、在紧急情况下维护用户个人和社会大众的隐私安全；
     　d、保持维护今生永恒网的商标所有权。
    如果用户提供的资料包含有不正确的信息，今生永恒网保留随时中止用户使用今生永恒网服务资格的权利。今生永恒网保留判定用户的行为是否符合今生永恒网服务条款的权利。
三：服务条款的修订：
今生永恒网有权在必要时修改服务条款。如果不同意所改动的内容，用户可以主动取消获得的网络服务。若用户继续享用网络服务，则视为接受服务条款的变动。今生永恒网保留随时修改或中断服务而不需知照用户的权利。今生永恒网行使修改或中断服务的权利，不需对用户或第三方负责。
四：拒绝提供担保和有限责任：
今生永恒网不对用户使用网络服务的任何风险作任何类型的担保，也不对用户所发表信息中的广告性信息承担任何责任。今生永恒网不担保服务一定能满足用户的要求，也不对服务的及时性和安全性作担保。今生永恒网不对用户所发布信息的删除或储存失败负责。今生永恒网不需对任何个人或第三方负责而随时中断服务。用户对后来的条款修改有异议，或对今生永恒网的服务不满，可以行使如下权利：
     　1、停止使用今生永恒网的网络服务。
     　2、通告今生永恒网停止对该用户的服务。
    结束用户服务后，用户使用今生永恒网服务的权利马上中止。今生永恒网没有义务传送任何未处理的信息或未完成的服务给用户或第三方。
五：通告：
服务条款的修改、服务变更、或其它重要事件的通告都可通过重要页面的公告或电子邮件或常规的信件传送。
六：网络服务内容的所有权：
今生永恒网所有的信息内容（文字、软件、声音、图片、录象、图表）版权归原文作者和今生永恒网共同所有，受版权、商标和其它财产所有权法律的保护。任何人没有获得原文作者或今生永恒网授权，不能擅自复制、再造这些内容、或创造与内容有关的派生产品。
七：法律：
如发生今生永恒网服务条款与中华人民共和国法律相抵触时，则这些条款将完全按法律规定重新解释，而其它条款则依旧保持对用户产生法律效力。用户和今生永恒网一致同意服从法院所有管辖。
          `)
// 表单数据
const formData = reactive({
    name: '',
    // birth_date: '',
    // death_date: '',
    avatar: '',
    // relationship: '',
    // religion: '',
    // nationality: '',
    // ancestral: '',
    // career: '',
    // alias: ''
})

// 情感关系列表
// const relationshipList = ref<any[]>([])

// 表单验证
const formRules = reactive<any>({
    name: [{
        required: true,
        message: '请输入逝者姓名',
        trigger: ['blur']
    }],
    avatar: [{
        required: true,
        message: '请上传逝者照片',
        trigger: ['change']
    }]
})




// 表单数据模型
interface RegisterForm {
	nickname: string;
	account: string;
	// verificationCode: string;
	password: string;
	password_confirm: string;
	// avatar: string;
	channel: string;
}

const registerFormRef = ref<FormInstance>();

const registerFormData = reactive<RegisterForm>({
	nickname: '',
	account: '',
	// verificationCode: '',
	password: '',
	password_confirm: '',
	// avatar: '',
	channel: '4'
});
const registerFormRules = reactive<FormRules<typeof registerFormData>>({
	nickname: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 15, message: '用户名长度在 3 到 15 个字符', trigger: 'blur' },
	],
	account: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
	],
	// verificationCode: [
	// 	{ required: true, message: '请输入验证码', trigger: 'blur' },
	// 	{ len: 6, message: '验证码通常为6位', trigger: 'blur' }, // 示例：假设验证码是6位
	// ],
	password: [
		{ required: true, message: '请输入登录密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
	],
	password_confirm: [
		{ required: true, message: '请再次输入登录密码', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== registerFormData.password) {
					callback(new Error('两次输入的密码不一致'));
				} else {
					callback();
				}
			},
			trigger: 'blur',
		},
	],
});
const isSendingCode = ref(false); // 是否正在发送验证码
const codeButtonText = ref('获取验证码'); // 获取验证码按钮文本
const countdown = ref(60); // 倒计时秒数
let timer: number | any | null = null; // 倒计时定时器
const getVerificationCode = () => {
	// 简单的手机号格式校验
	if (!registerFormData.account || !/^1[3-9]\d{9}$/.test(registerFormData.account)) {
		ElMessage.warning('请先输入正确的手机号');
		return;
	}

	isSendingCode.value = true;
	codeButtonText.value = `${countdown.value}s 后重发`;

	// 模拟发送验证码的异步操作
	console.log(`正在向 ${registerFormData.account} 发送验证码...`);

	timer = setInterval(() => {
		countdown.value--;
		codeButtonText.value = `${countdown.value}s 后重发`;

		if (countdown.value <= 0) {
			clearInterval(timer!);
			timer = null;
			isSendingCode.value = false;
			codeButtonText.value = '获取验证码';
			countdown.value = 60; // 重置倒计时
		}
	}, 1000);

	// 实际应用中，这里会调用 API 发送验证码
	// 成功或失败后需要根据结果处理 isSendingCode 和 timer
};

// 提交按钮
const handleSubmit = async () => {
    try {
        // 第一步：先验证基础表单（formRules）
        await formRef.value?.validate()
        
        // 第二步：如果用户未登录，需要验证注册表单并注册
        if (!getToken()) {
            // 检查协议同意状态
            if (!agreement.value) {
                ElMessage.error('请先同意协议');
                return
            }
            
            // 验证注册表单
            if (!registerFormRef.value) {
                ElMessage.error('注册表单未初始化');
                return;
            }
            
            // 触发注册表单验证
            await registerFormRef.value.validate();
            
            // 注册表单验证通过，执行注册
            console.log('注册表单验证通过，准备注册:', registerFormData);
            const userStore = useUserStore()
            await userStore.register({...registerFormData});
        }
        
        // 第三步：两个表单都验证通过后，执行创建纪念馆接口
        let data = { ...formData }
        let params = {
            type: 1,
            user_id: userStore.userInfo.id, 
            is_double: 0
        }
        
        await my_mufast_add({...data, ...params})
        
        // 创建成功，隐藏表单显示成功页面
        isShow.value = false
        
    } catch (error) {
        // 验证失败或提交失败
        console.error('表单验证失败或提交出错:', error);
        // 这里可以根据具体错误类型给出更详细的提示
        if (error instanceof Error) {
            ElMessage.error(error.message || '操作失败，请检查填写的信息');
        }
    }
}

// 上传图片
const upLoadUrl = import.meta.env.VITE_APP_BASE_URL + '/api/upload/image'
const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
    // formData.avatar = URL.createObjectURL(uploadFile.raw!)
    formData.avatar = response.data.uri || ''
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
    ElMessage.error('Avatar picture must be JPG、PNG、GIF format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

// const getRelationshipList = async () => {
//     const data = await apiMyMuRelation()
//     // {page_no: 1, page_size: 9999}
//     relationshipList.value = data
// }

onMounted(() => {
    // getRelationshipList()
    if(userStore.userInfo.id){
        isShowRegister.value = false
    }else{
        isShowRegister.value = true
    }
})

// 进入纪念馆设置
const handleClick = () => {
    router.push({
        path: '/memorialManage'
    })
}
</script>

<style scoped>
    .page-main{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    .form-main{
        width: 100%;
    }
    .form-main-item{
        max-width: 420px;
    }
    .avatar-uploader{
        border: 1px dashed #cdd0d6;
        border-radius: 6px;
        overflow: hidden;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
    }
    .avatar-uploader .avatar {
        width: 100px;
        height: 100px;
        display: block;
        object-fit: contain;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        text-align: center;
    }
    
    .page-main-title{
        font-size: 22px;
        font-weight: bold;
        color: red;
        width: calc(100% - 100px);
        margin: 0 50px;
        text-align: center;
        line-height: 35px;
    }
    .page-main-page-container{
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 40px 30px;
        box-sizing: border-box;
    }
    .page-main-page-container-title{
        font-size: 20px;
        font-weight: bold;
    }
    .page-main-page-container-content{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px;
        gap: 20px 0;
    }
    .link{
        margin-top: 10px;
        cursor: pointer;
        color: #f00;
    }

    .box-card{
        width: 840px;
        margin: 0 auto;
        padding: 40px 30px;
        margin-top: 30px;
    }
    .form-main-item-checkbox .el-form-item__content .el-checkbox{
        margin-right: 10px;
    }
    .form-main-item-checkbox-title{
        cursor: pointer;
    }
    .form-main-item-checkbox-title:hover{
        cursor: pointer;
        color: #F16C20;
    }
    .form-main-btn{
        background-color: #A23400;
        color: #ffffff;
        width: 200px;
        font-size: 22px;
        border-radius: 10px;
    }

    /* 验证码输入框和按钮的容器 */
    .verification-code-input {
        display: flex;
        align-items: center;
        /* 垂直居中对齐 */
        gap: 10px;
        /* 输入框和按钮之间的间隔 */
        width: 100%;
        /* 确保容器占满父元素宽度 */
    }

    .verification-code-input .el-input {
        flex-grow: 1;
        /* 输入框占据剩余空间 */
    }

    .verification-code-input .el-button {
        flex-shrink: 0;
        /* 按钮不缩小 */
    }
</style>
